<template>
  <div class="box">
    <img class="background" src="../../../static/img/sbzc.jpg" alt="">
    <input type="text" v-model="sbname1" class="sbinput1" placeholder="请输入商标名称">
    <input type="text" v-model="sbphone1" class="sbinput2"
           placeholder="请输入接收查询结果的手机号码">
    <img @tap="getReslt(1)" class="img1" src="../../../static/img/sb_ljcx.png" alt="">
    <div id="breakNewsList" class="x-center text2">
      <p>刘**<span class="color">86.7%</span>相似商标数<span class="color">5</span>个，<span class="color">建议修改</span></p>
      <p>王**<span class="color">92.1%</span>相似商标数<span class="color">1</span>个，<span class="color">建议注册</span></p>
      <p>高**<span class="color">89.5%</span>相似商标数<span class="color">9</span>个，<span class="color">不能注册</span></p>
      <p>王**<span class="color">92.1%</span>相似商标数<span class="color">1</span>个，<span class="color">建议注册</span></p>
      <p>刘**<span class="color">86.7%</span>相似商标数<span class="color">5</span>个，<span class="color">建议修改</span></p>
      <p>陈**<span class="color">95.7%</span>相似商标数<span class="color">8</span>个，<span class="color">不能注册</span></p>
    </div>
    <div class="list3">
      <img @tap="open" class="listimg1" src="../../../static/img/sb_list1.png" alt="">
      <img @tap="open" class="listimg2" src="../../../static/img/sb_list2.png" alt="">
      <img @tap="open" class="listimg3" src="../../../static/img/sb_list3.png" alt="">
      <img @tap="open" class="listimg4" src="../../../static/img/sb_list4.png" alt="">
    </div>
    <input v-model="sbname2" class="sbinput3" type="text" placeholder="请输入商标名称">
    <input v-model="sbcompy2" class="sbinput4" type="text"
           placeholder="请输入所属行业">
    <input v-model="sbphone2" class="sbinput5" type="text"
           placeholder="请输入接收查询结果的手机号码">
    <img @tap="getReslt(2)" class="img2" src="../../../static/img/sb_ljcx.png" alt="">
    <PromotionFooter></PromotionFooter>
  </div>
</template>

<script>
  import PromotionFooter from './child/PromotionFooter'
  import API from '@/config/api'
  import {regPhone} from "../../config/utils";

  export default {
    name: "promotionTrademark",
    components: {PromotionFooter},
    data: function () {
      return {
        sbname1: '',
        sbphone1: '',
        sbname2: '',
        sbcompy2: '',
        sbphone2: ''
      }
    },
    mounted: function(){
      $(function () {
        var scroll2 = new ScrollText("breakNewsList","","",true,50,true);
      })
    },
    methods: {
      getReslt(n) {

        var params;

        if (n == 1) {
          params = {
            district: '手机来源',
            requir: '查询商标',
            type: this.sbname1,
            name: this.sbname1,
            mobile: this.sbphone1
          };
          if (!this.sbname1 || !this.sbphone1) {
            this.$msg("请将信息填写完整");
            return;
          }

          if (!regPhone(this.sbphone1)) {
            this.$msg('请填写正确的手机号码');
            return;
          }
        } else if (n == 2) {
          params = {
            district: '手机来源',
            requir: '查询商标',
            type: this.sbcompy2,
            name: this.sbname2,
            mobile: this.sbphone2
          };
          if (!this.sbname2 || !this.sbphone2 || !this.sbcompy2) {
            this.$msg("请将信息填写完整");
            return;
          }

          if (!regPhone(this.sbphone2)) {
            this.$msg('请填写正确的手机号码');
            return;
          }
        }

        this.$axios.post(API.searchOrder, params)
          .then((res) => {
            if (res.code == 1) {
              //清空填写数据
              this.sbname1 = '';
              this.sbphone1 = '';
              this.sbname2 = '';
              this.sbphone2 = '';
              this.sbcompy2 = '';
              this.$msg('客服会尽快与你取得联系')
            }
          })
      },
      //免费咨询
      open() {
        get_chat_event('advice')
        //_53App.talk('icon', '&zdkf_type=1&kf=1934734627%40qq.com&kflist=off')
      }
    }
  }
</script>

<style lang="less" scoped>
  .box {
    position: relative;
    padding-bottom: 1.1rem;
  }

  .color {
    color: #30c7e6;
  }

  img {
    width: 7.5rem;
    display: block;
  }

  input {
    border: 1px solid #32c7e8 !important;
    height: 0.96rem !important;
    margin-bottom: 0.16rem !important;
    border-radius: 5px !important;
    font-size: 0.28rem !important;
  }

  input::placeholder {
    font-size: 0.24rem;
  }

  .sbinput1 {
    position: absolute;
    top: 4.39rem;
    left: 2.16rem;
    width: 4.42rem;
  }

  .sbinput2 {
    position: absolute;
    top: 5.52rem;
    left: 2.16rem;
    width: 4.42rem;
  }

  .img1 {
    position: absolute;
    top: 6.62rem;
    left: 0.92rem;
    width: 5.68rem;
    height: 0.92rem;
  }

  .text2 {
    top: 9.48rem;
    height: 1.8rem;
    overflow: hidden;
    p {
      margin: 0;
      padding: 0;
      font-size: 0.25rem;
      white-space: nowrap;
      margin-bottom: 0.03rem;
    }
  }

  .list3 {
    position: absolute;
    top: 19.47rem;
    left: 1.19rem;
    img {
      width: 5.5rem;
      margin-bottom: 0.5rem;
    }
  }

  .sbinput3 {
    position: absolute;
    top: 34.2rem;
    left: 2.22rem;
    width: 4.42rem;
  }

  .sbinput4 {
    position: absolute;
    top: 35.32rem;
    left: 2.22rem;
    width: 4.42rem;
  }

  .sbinput5 {
    position: absolute;
    top: 36.81rem;
    left: 2.22rem;
    width: 4.42rem;
  }

  .img2 {
    position: absolute;
    top: 38.15rem;
    left: 1.01rem;
    width: 5.68rem;
    height: 0.92rem;
  }
</style>
